<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorator="/web/_layouts/default">
<head>
    <meta charset="UTF-8">
    <title>重置密码</title>
</head>
<body>
<div id="pjax-web-container" layout:fragment="content">
    <style>
        body {
            background-color: #f4f5f5;
            overflow: hidden;
        }
    </style>
    <div class="container text-center" style="min-height: 850px;">
        <div class="col-md-offset-3 col-md-6 reset-password-view">
            <form th:action="@{/send-reset-password}"
                  class="reset-password-form"
                  method="post">
                <h1 class="title">重置密码</h1>
                <div class="content">
                    <div class="input-group">
                        <input spellcheck="false" placeholder="请输入邮箱"
                               name="mail"
                               maxlength="128"
                               class="input">
                    </div>
                    <button class="btn submit-btn" type="submit">发送邮件</button>
                </div>
                <a th:href="@{/}" class="index-link">返回首页</a>
            </form>
        </div>
    </div>
    <script>
        $(function () {
            $('form.reset-password-form').ajaxForm({
                dataType: 'json',
                beforeSubmit: function (arr, form, option) {
                    form.find("button:submit").attr('disable', true);
                },
                success: function (data, statusText, xhr, form) {
                    if (data.code === 200) {
                        form.resetForm(); // 重置表单
                        layer.msg(data.message, {icon: 1});
                    } else {
                        layer.msg(data.message, {icon: 2});
                    }
                    form.find("button:submit").attr('disable', false);
                }
            });
        });
    </script>
</div>
</body>
</html>